import { Button, Dropdown, Radio, SearchBar, Space, Tabs } from 'antd-mobile'
import axios from 'axios'
import React, { useEffect, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import Style from './Search.module.scss'
import { changeSearchInfo } from '@/store/slices/searchSlice'

const SearchDetail = () => {
    const dispatch = useDispatch()
    const searchInfo = useSelector((state: any) => {
        // console.log(JSON.parse(state.searchSlice.searchInfo).data.data.directlyList)
        console.log(JSON.parse(state.searchSlice.searchInfo))
        return JSON.parse(state.searchSlice.searchInfo)
    })

    const getSearchCategory = (key: any, categoryId: number) => {
        return axios({
            url: '/xhr/search/search.json',
            method: 'get',
            params: {
                'csrf_token': "fbfcd0065626a539237fec01d5a340d8",
                '__timestamp': "autoComplete",
                'keyword': key,
                'sortType': 0,
                categoryId,
                'matchType': 1,
                'floorPrice': -1,
                'upperPrice': -1,
                'size': 40,
                'itemId': 0,
                'stillSearch': false,
                'searchWordSource': 5,
                'needPopWindow': false,
            }
        })
    }

    const [descSorted,setDescSorted] = useState<boolean>(true)
    const [floorPrice,setFloorPrice] = useState<number>(0)
    const [upperPrice,setUpperPrice] = useState<number>(0)

    const paixu = (key:any,descSorted:boolean,floorPrice:number,upperPrice:number) => {
        return axios({
            url: '/xhr/search/search.json',
            method: 'get',
            params: {
                'csrf_token': "fbfcd0065626a539237fec01d5a340d8",
                '__timestamp': "autoComplete",
                'keyword': key,
                'sortType':1,
                descSorted,
                'categoryId': 0,
                'matchType': 1,
                floorPrice,
                upperPrice,
                'size': 40,
                'itemId': 0,
                'stillSearch': false,
                'searchWordSource': 5,
                'needPopWindow': false,
            }
        })
    }

    const navigate = useNavigate()
    return (
        <div className={Style.wrapper}>
            {/* 搜索 */}
            <SearchBar value={searchInfo.data.data.directOrginQuery} showCancelButton={() => true} onFocus={() => { navigate('/search') }} onCancel={() => { navigate('/search') }} />

            <Dropdown>
                <Dropdown.Item key='sorter' title='综合'></Dropdown.Item>
                <Dropdown.Item key='bizop' title='价格'>
                    <div style={{ padding: '10px', fontSize: '16px', height: '140px', width: '100%', boxSizing: 'border-box' }}>
                        <div style={{ margin: '5px' }}>
                            <span style={{ marginRight: '5px' }}>筛选</span>
                            <input type="number" style={{ width: '80px', marginRight: '5px' }} onBlur={(e)=>{
                                setFloorPrice(Number(e.target.value))
                            }} />
                            <span style={{ marginRight: '5px' }}>——</span>
                            <input type="number" style={{ width: '81px', marginRight: '5px' }} onBlur={(e)=>{
                                setUpperPrice(Number(e.target.value))
                            }}/>
                        </div>
                        <div style={{ margin: '10px' }}>
                            <span style={{ marginRight: '5px' }}>排序</span>
                            <Button style={{ marginRight: '20px' }} onClick={()=>{
                                setDescSorted(false)
                            }}>从低到高</Button>
                            <Button style={{ marginRight: '20px' }} onClick={()=>{
                                setDescSorted(true)
                            }}>从高到低</Button>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Button style={{ width: '50%' }}>取消</Button>
                            <Button style={{ width: '50%' }} onClick={()=>{
                                paixu(searchInfo.data.data.directOrginQuery,descSorted,floorPrice,upperPrice).then(res=>{
                                    return dispatch(changeSearchInfo(JSON.stringify(res)))
                                })
                            }}>确定</Button>
                        </div>
                    </div>
                </Dropdown.Item>
                <Dropdown.Item key='more' title='分类'>
                    <div style={{ padding: 12 }}>
                        {searchInfo.data.data.categoryL1List.map((val: any) => {
                            return <Button style={{ padding: '0 5px', margin: '5px 10px' }} fill='outline' key={val.id} onClick={() => {
                                getSearchCategory(searchInfo.data.data.directOrginQuery, val.id).then(res => {
                                    console.log(res)
                                    return dispatch(changeSearchInfo(JSON.stringify(res)))
                                })
                            }}>{val.name}</Button>
                        })}
                    </div>
                </Dropdown.Item>
            </Dropdown>
            {/* 商品 */}
            <div className={Style.product}>
                {
                    searchInfo.data.data.directlyList.map((val: any) => {
                        return <dl key={val.id} className={Style.dl} onClick={()=>{console.log(val);navigate('/detail/'+val.id)}}>
                            <dt style={{ textAlign: 'center' }}>
                                <img style={{ width: '100px' }} src={val.listPicUrl} alt="" />
                            </dt>
                            <dd style={{ marginLeft: 0 }}>{val.name}</dd>
                            <dd style={{ marginLeft: 0 }}>
                                <span style={{ marginRight: '5px', fontSize: '18px', color: 'red', fontWeight: 'bold' }}>{!!val.finalPriceInfoVO.priceInfo.finalPrice && '￥' + val.finalPriceInfoVO.priceInfo.finalPrice.price}</span>
                                <del style={{ color: 'gray' }}>{'￥' + val.sortOriginPrice}</del>
                            </dd>
                        </dl>
                    })
                }
            </div>
        </div>

    )
}

export default SearchDetail

